<div class="page page-buttons clearfix">


    <ol class="breadcrumb breadcrumb-small">
        <li>UI Elements</li>
        <li class="active"><a href="#/ui/buttons">Buttons</a>
        </li>
    </ol>

    <div class="page-wrap">
        <div class="row">
            <div class="col-lg-6">
                <!-- colors -->
                <div class="panel panel-lined mb30">
                    <div class="panel-heading"><i>Colors</i>
                    </div>
                    <div class="panel-body">
                        <button type="button" class="btn btn-default">Default</button>
                        <button type="button" class="btn btn-primary">Primary</button>
                        <button type="button" class="btn btn-success">Success</button>
                        <button type="button" class="btn btn-info">Info</button>
                        <button type="button" class="btn btn-warning">Warning</button>
                        <button type="button" class="btn btn-danger">Danger</button>
                        <button type="button" class="btn btn-default" disabled>Disabled</button>
                    </div>
                </div>
                <!-- #end colors -->
            </div>
            <!-- #end col -->

            <div class="col-lg-6">
                <!-- addons -->
                <div class="panel panel-lined mb30">
                    <div class="panel-heading"><i>Addons</i>
                    </div>
                    <div class="panel-body">
                        <button type="button" class="btn btn-line-default">Lined Default</button>
                        <button type="button" class="btn btn-primary btn-rounded">Round</button>
                        <button type="button" class="btn btn-line-warning btn-rounded">Lined Round</button>
                        <button type="button" class="btn btn-line-info btn-icon-inline"><i class="fa fa-html5"></i>HTML5</button>
                        <button type="button" class="btn btn-danger btn-icon-inline btn-rounded"><i class="fa fa-css3"></i>CSS3</button>
                        <button type="button" class="btn btn-success btn-icon-inline"><i class="fa fa-gamepad"></i>Game Pad</button>
                    </div>
                </div>
                <!-- #end addons -->
            </div>
            <!-- #end col -->
        </div>
        <!-- #end row -->


        <div class="row">
            <div class="col-lg-4">
                <!-- Sizes -->
                <div class="panel panel-lined mb30">
                    <div class="panel-heading"><i>Sizes</i>
                    </div>
                    <div class="panel-body">
                        <p class="small">Add <code>.btn-xs</code>, <code>.btn-sm</code> or <code>.btn-lg</code> for additional sizes</p>
                        <button type="button" class="btn btn-default btn-xs">Micro</button>
                        <button type="button" class="btn btn-default btn-sm">Small Button</button>
                        <button type="button" class="btn btn-default">Normal Button</button>
                        <button type="button" class="btn btn-default btn-lg">Large Button</button>
                    </div>
                </div>
                <!-- #end Sizes -->
            </div>

            <div class="col-lg-4">
                <!-- Social Icons -->
                <div class="panel panel-lined mb30">
                    <div class="panel-heading"><i>Social Icons</i>
                    </div>
                    <div class="panel-body">
                        <p class="small text-muted text-uppercase">Square Icons</p>
                        <button type="button" class="btn btn-twitter fa fa-twitter icon"></button>
                        <button type="button" class="btn btn-facebook fa fa-facebook icon"></button>
                        <button type="button" class="btn btn-gplus fa fa-google-plus icon"></button>
                        <button type="button" class="btn btn-github fa fa-github icon"></button>
                        <button type="button" class="btn btn-dribbble fa fa-dribbble icon"></button>
                        <hr/>

                        <p class="small text-muted text-uppercase">Circle Icons</p>
                        <button type="button" class="btn btn-twitter fa fa-twitter btn-icon-circle icon"></button>
                        <button type="button" class="btn btn-facebook fa fa-facebook btn-icon-circle icon"></button>
                        <button type="button" class="btn btn-gplus fa fa-google-plus btn-icon-circle icon"></button>
                        <button type="button" class="btn btn-github fa fa-github icon btn-icon-circle "></button>
                        <button type="button" class="btn btn-dribbble fa fa-dribbble icon btn-icon-circle"></button>
                    </div>
                </div>
                <!-- #end social-icons -->
            </div>

            <div class="col-lg-4">
                <!-- Block Buttons -->
                <div class="panel panel-lined mb30">
                    <div class="panel-heading"><i>Block Buttons</i>
                    </div>
                    <div class="panel-body">
                        <button type="button" class="btn btn-default btn-lg btn-block">Block Button with icon left<i class="fa fa-clipboard left"></i>
                        </button>
                        <button type="button" class="btn btn-primary btn-lg btn-block">Block Button with icon right<i class="fa fa-file-text right"></i>
                        </button>
                    </div>
                </div>
                <!-- #end block buttons -->
            </div>
        </div>
        <!-- #end row -->


        <div class="row">
            <div class="col-lg-12">
                <!-- Button Groups -->
                <div class="panel panel-lined mb30">
                    <div class="panel-heading"><i>Button Groups</i>
                    </div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-lg-4">
                                <p class="small text-muted text-uppercase text-bold">Single Button Group</p>
                                <p class="small mb15">Just wrap the buttons in a <code>.btn-group</code>
                                </p>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-default">Left</button>
                                    <button type="button" class="btn btn-default">Middle</button>
                                    <button type="button" class="btn btn-default">Right</button>
                                </div>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-default fa fa-clipboard"></button>
                                    <button type="button" class="btn btn-default fa fa-scissors"></button>
                                    <button type="button" class="btn btn-default fa fa-save"></button>
                                </div>
                                <div class="btn-group btn-group-justified">
                                    <div class="btn-group" role="group">
                                        <button type="button" class="btn btn-default">I</button>
                                    </div>
                                    <div class="btn-group" role="group">
                                        <button type="button" class="btn btn-default">Am</button>
                                    </div>
                                    <div class="btn-group" role="group">
                                        <button type="button" class="btn btn-default">Justified</button>
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-4">
                                <p class="small text-muted text-uppercase text-bold">Button Toolbar Group</p>
                                <p class="small mb15">Button groups wrapped inside <code>.btn-toolbar</code>
                                </p>
                                <div class="btn-toolbar">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-default fa fa-save"></button>
                                        <button type="button" class="btn btn-default fa fa-paste"></button>
                                    </div>
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-default fa fa-align-right"></button>
                                        <button type="button" class="btn btn-default fa fa-align-justify"></button>
                                        <button type="button" class="btn btn-default fa fa-align-left"></button>
                                    </div>
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-default fa fa-paperclip"></button>
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-4">
                                <p class="small text-muted text-uppercase text-bold">Vertical Button Group</p>
                                <p class="small mb15">Buttons wrapped inside<code>.btn-group-vertical</code>
                                </p>
                                <div class="btn-group-vertical">
                                    <button type="button" class="btn btn-default">Top</button>
                                    <div class="btn-group dropdown" dropdown>
                                        <button class="btn btn-danger dropdown-toggle" dropdown-toggle>Middle<span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li><a href="j:;">Action</a>
                                            </li>
                                            <li><a href="j:;">Another action</a>
                                            </li>
                                            <li><a href="j:;">Something else here</a>
                                            </li>
                                            <li class="divider"></li>
                                            <li><a href="j:;">Separated link</a>
                                            </li>
                                        </ul>
                                    </div>
                                    <button type="button" class="btn btn-default">Bottom</button>
                                </div>
                            </div>
                        </div>
                        <!-- #end inner row -->
                    </div>
                    <!-- #end panel-body -->
                </div>
                <!-- #end Button Groups -->
            </div>
            <!-- #end col -->

        </div>
        <!-- #end row -->


        <div class="row">
            <div class="col-lg-6">
                <!-- Social Buttons -->
                <div class="panel panel-lined mb30">
                    <div class="panel-heading"><i>Social Buttons</i>
                    </div>
                    <div class="panel-body">
                        <button type="button" class="btn btn-default btn-twitter btn-rounded"><i class="fa fa-twitter"></i>Twitter</button>
                        <button type="button" class="btn btn-default btn-facebook btn-rounded"><i class="fa fa-facebook"></i>Facebook</button>
                        <button type="button" class="btn btn-default btn-gplus"><i class="fa fa-google-plus"></i>Google</button>
                        <button type="button" class="btn btn-default btn-dribbble"><i class="fa fa-dribbble"></i>Dribbble</button>
                    </div>
                </div>
                <!-- #end social btns -->
            </div>

            <div class="col-lg-6">
                <!-- toggle Buttons -->
                <div class="panel panel-lined mb30">
                    <div class="panel-heading"><i>Toggle Buttons</i>
                    </div>
                    <div class="panel-body">
                        <div class="btn-group mb15">
                            <label class="btn btn-info" ng-model="checkModel.left" btn-checkbox>Check One</label>
                            <label class="btn btn-info" ng-model="checkModel.middle" btn-checkbox>Check Two</label>
                            <label class="btn btn-info" ng-model="checkModel.right" btn-checkbox>Check Three</label>
                        </div>
                        <div class="btn-group">
                            <label class="btn btn-default" ng-model="radioModel" btn-radio="'Left'" uncheckable>Radio One</label>
                            <label class="btn btn-default" ng-model="radioModel" btn-radio="'Middle'" uncheckable>Radio Two</label>
                            <label class="btn btn-default" ng-model="radioModel" btn-radio="'Right'" uncheckable>Radio Three</label>
                        </div>
                    </div>
                </div>
                <!-- #end toggle buttons -->
            </div>

        </div>
        <!-- #end row -->






    </div>
    <!-- #end page-wrap -->
</div>